<template>
    <div class="news">
        <div class="container">
            <div class="head">
                <h3>热门品牌 <span>国际经典 品质保证</span></h3>
                <div class="left">&lt;</div>
                <div class="right">&gt;</div>
            </div>
            <div class="content">
                <ul>
                    <li v-for="item,index in shopList" :key="item.id">
                        <a href="javascript:;">
                            <img :src="item.picture" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {getBrand} from '../../../request/api.js'
export default {
    data() {
        return {
            shopList: [],
            tabIndex: -1
        }
    },
    methods: {
        async getBrand(){
            var res=await this.getBrand();
            if(res.data.msg=='操作成功'){
                this.shopList=res.data.result
            }
        }
    },
    mounted() {
        // this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/brand?limit=10').then((res) => {
        //     if (res.data.msg == '操作成功') {
        //         this.shopList = res.data.result
        //     }
        // })

    },
}
</script>

<style lang="scss" scoped>
.head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;

    h3 {
        flex: 1;
        font-size: 32px;
        font-weight: 400;
        margin-left: 6px;
        height: 35px;
        line-height: 35px;

        span {
            font-size: 16px;
            color: #999;
            margin-left: 20px;
        }
    }

    div {

        width: 20px;
        height: 20px;
        background: #ccc;
        color: #fff;
        display: inline-block;
        text-align: center;
        margin-left: 5px;
    }

    .more {
        background: #27ba9b;
    }
}

.content {
    display: flex;
    width: 100%;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;
    ul {
        display: flex;
        justify-content: space-between;


        li {
            width: 240px;
            margin-right: 10px;

            a {

                img {
                    width: 240px;
                    height: 305px;
                }

            }
        }
    }
}
</style>